<template>
  <div class="comment-control">
    <div class="enterprise">
      <el-input
        class="textarea"
        type="textarea"
        :rows="2"
        placeholder="请输入回复记录"
        v-model="commentData.comment"
      ></el-input>
      <div class="btn-box"><span class="replyBtn"  @click="postComment">回复</span></div>
    </div>
    <div class="comment">
      <div class="list-item"
        v-for="(items) in commentData.list" 
        :key="items.id"
       >{{items.content}}&nbsp;<span class="date">({{items.replier}}{{items.date}})</span>
       </div>
    </div>
  </div>
</template>

<script>
import {
  getreply,
  reply,
} from "@/api.js"
export default {
  props: ["docId"],
  computed: {
  },
  watch: {
    'docId': {
			deep: true,
			handler:function(){
        this.init()
			},
		}
	},
  mounted(){
    debugger
    this.init()
  },
  data: function() {
    return { 
      commentData:{
        list:[],
        comment:''
      },
    };
  },
  methods: {
    postComment() {
      let data = {
        data: this.commentData.comment,
      }
      reply(
        this.docId,
        data,
        {
          onSucess: res => {
            console.log(res,'res')
            this.commentData.comment = ''
            this.init()
          }
        }
      )
    },
    init(){
      getreply(
        this.docId,
        {
          onSucess: res => {
            console.log(res,'res')
            this.commentData.list = res.data;
          }
        }
      )
      // getUserAvatar(
      //   userId,
      //   {
      //     onSucess: res=> {
      //       this.avatar = res.data.data;
      //     }
      //   }
      // )
    },
  },
};
</script>
<style>
@import "../assets/style/comment.scss";
</style>